<template>
  <div class="register">
    <div class="register_info">
      <div class="register_title">
        <img src="@/assets/img/logo1.png" alt="" />
        <div class="logo_text">蓝精灵电影-注册</div>
      </div>
      <div class="register_form">
        <p>UserName</p>
        <el-input
          v-model="userName"
          placeholder="请输入帐号"
          @blur="isExistUserName"
        ></el-input>
        <p>Password</p>
        <el-input
          v-model="password"
          placeholder="请输入密码"
          show-password
        ></el-input>
        <p>Check Password</p>
        <el-input
          v-model="checkedPassword"
          placeholder="请确认密码"
          @blur="isPasswordSame"
          show-password
        ></el-input>
        <p>E-mail</p>
        <el-input
          v-model="email"
          placeholder="请输入邮箱地址，获得邮箱验证码"
          @blur="checkEmail"
          :style="isPassEmail ? '' : 'border:1px solid red;'"
        ></el-input>
        <el-button
          type="info"
          icon="el-icon-message"
          circle
          @click="sendEmail"
        ></el-button>
        <p>E-mail Code</p>
        <el-input v-model="emailCode" placeholder="请输入验证码"></el-input>
        <div class="agree">
          <el-checkbox v-model="checked"
            >我已同意“蓝精灵电影”用户注册协议</el-checkbox
          >
        </div>

        <div class="btn">
          <el-button
            class="register-form-button"
            type="primary"
            @click="register()"
            >SIGN UP</el-button
          >
        </div>
        <div class="register_footer">
          <el-link class="register" :underline="false" href="/login"
            >我有账号 去登陆
            <i class="el-icon-right"></i>
          </el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Register, SendEmailCode, IsExistUserName } from "@/api/user.js";
export default {
  data() {
    return {
      userName: "",
      password: "",
      checkedPassword: "",
      checked: false,
      email: "",
      emailCode: "",
      isPassEmail: true,
    };
  },
  methods: {
    // 判断用户名是否存在
    isExistUserName() {
      const vo = {
        email: this.userName,
      };
      if (this.userName == "" || this.userName == null) {
        this.$message.error("用户名不得为空");
      } else if (this.userName.length < 5) {
        this.$message.error("用户名不得小于五位");
      } else {
        IsExistUserName(vo).then((res) => {
          // console.log(res.data);
          if (res.code == 200) {
            if (res.data.success === "success") {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
            } else {
              this.$message.error(res.data.msg);
            }
          }
        });
      }
    },
    // 两次密码是否相同
    isPasswordSame() {
      if (this.checkedPassword !== this.password) {
        this.$message({
          message: "两次密码不相同，请重新输入",
          type: "warning",
        });
      }else{
        this.$message({
          message: "两次密码相同，请继续填写",
          type: "success",
        });
      }
    },
    //发送email验证码
    sendEmail() {
      //客户端对传入的邮箱内容，进行基本的邮箱格式验证。验证成功后发消息到服务端。
      //https://www.jb51.net/article/67628.htm

      if (this.isPassEmail) {
        const emailVo = {
          email: this.email,
        };
        // console.log(emailVo);

        //如何发送
        SendEmailCode(emailVo).then((res) => {
          // console.log(res.data);
          if (res.code == 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            //保存验证码
            localStorage.setItem("code", res.data.code);
          }
        });
      } else {
        this.$message({
          message: "邮箱格式不正确",
          type: "warning",
        });
      }
    },

    //邮件输入框的失去焦点时间
    checkEmail() {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (mailReg.test(this.email)) {
        this.isPassEmail = true;
      } else {
        this.isPassEmail = false;
      }
      // console.log(this.isPassEmail);
    },

    // 注册
    register() {
      // 用户名判断
      if (this.userName.length < 6) {
        this.$message({
          message: "用户名不能小于6位",
          type: "warning",
        });
        return;
      }
      // 确认密码判断
      if (this.checkedPassword !== this.password) {
        this.$message({
          message: "两次密码不相同，请重新输入",
          type: "warning",
        });
        return;
      }
      // 协议勾选判断
      if (this.checked == false) {
        this.$message({
          message: "请阅读“哇塞电影”用户注册协议，并勾选",
          type: "warning",
        });
        return;
      }
      // 定义输出参数
      const RegisterData = {
        username: this.userName,
        password: this.password,
        email: this.email,
        emailCode: this.emailCode,
        token: localStorage.getItem("code"),
      };

      Register(RegisterData).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.$router.push("/login");
        } else {
          this.$message({
            message: res.data.msg,
            type: "danger",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100%;
  .register_info {
    width: 500px;
    margin: 50px auto;
    .register_title {
      height: 75px;
      img {
        width: 75px;
        height: 75px;
        float: left;
        margin-left: 20px;
      }
      .logo_text {
        float: left;
        line-height: 75px;
        font-size: 30px;
        font-weight: bold;
        margin-left: 50px;
      }
    }
    .register_form {
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      color: #91949c;
      font-size: 16px;
      .btn {
        margin: 50px 0 0 0;
        clear: both;
        .register-form-button {
          width: 100%;
          height: 50px;
          font-weight: bold;
          font-size: 16px;
        }
      }
      .register_footer {
        text-align: center;
        .register {
          height: 50px;
          line-height: 50px;
          font-weight: bold;
          text-align: center;
        }
      }
    }
  }
}

// .register {
//   width: 100%;
//   height: 100%;
// }
// .register .register_info {
//   width: 500px;
//   margin: 50px auto;
// }
// .register_title {
//   height: 75px;
// }
// .register_title img {
//   width: 75px;
//   height: 75px;
//   float: left;
//   margin-left: 20px;
// }
// .logo_text {
//   float: left;
//   line-height: 75px;
//   font-size: 30px;
//   font-weight: bold;
//   margin-left: 50px;
// }
// .register_form {
//     height: 40px;
//     line-height: 40px;
//   font-weight: bold;
//   color: #91949c;
//   font-size: 16px;
// }
// .forget {
//   float: right;
//   margin: 20px 0;
// }
// .forget .register_link {
//   font-size: 16px;
//   color: #91949c;
// }
// .register_form .btn {
//   clear: both;
// }
// .register-form-button {
//   width: 100%;
//   font-weight: bold;
//   font-size: 16px;
// }
// .register_footer {
//   text-align: center;
// }
// .register_footer .register {
//   height: 50px;
//   line-height: 50px;
//   font-weight: bold;
// }
</style>